import React,{useEffect,useState} from 'react'
import {useSelector,useDispatch} from "react-redux"
import { ProductCard } from 'react-vant';
import { Empty,Button } from 'react-vant';
import * as action from "../action"
import {useNavigate} from "react-router-dom"
import { NavBar } from 'react-vant';
import { Checkbox } from 'react-vant';
import { SubmitBar } from 'react-vant';



function Shopcar() {
    let [mysum,setMysum] =useState(0)
    let navigate = useNavigate()
    let dispatch = useDispatch()
    let store = useSelector((state)=>{
        return {
            ...state.shopreducer
        }
  })
  let addfn = (id)=>{
      dispatch(action.addFn(id))
  }
  let delfn = (id)=>{
      console.log(id);
      dispatch(action.delFn(id))
  }
  let setChecked = (e,id)=>{
      // console.log(e,id);
       dispatch(action.checkitem(id))
  }
  let changeAll = ()=>{
      dispatch(action.changeall())
  }
  useEffect(()=>{
     let sumarr = store.shoparr.filter(item=>item.flag)
    let sumzong = sumarr.reduce((a,b)=>{
       return  a + b.num * b.price
     },0)
     setMysum(sumzong)
     
  },[store.shoparr])
  return (
    <div>
       <NavBar
      title="标题"
      leftText="返回"
      rightText="按钮"
      onClickLeft={() => {navigate(-1)}}
      onClickRight={() => {}}
    />
       
        {
            store.shoparr && store.shoparr.length ? store.shoparr.map((item,index)=>{
                return  <ProductCard
                
                key={index}
                num={item.num}
                price={item.price}
                desc={item.des}
                title={item.tit}
                thumb={item.img}
                footer={
                    <>
                       <Checkbox checked={item.flag} onChange={(e)=>setChecked(e,item.id)}></Checkbox>
                      <Button size="mini" round plain style={{ marginRight: 2 }} onClick={()=>delfn(item.id)}>
                        -
                      </Button>
                      <Button size="mini" round plain onClick={()=>addfn(item.id)}>
                        + 
                      </Button>
                    </>
                  }
              />
            }):<Empty description="暂无数据" />
        }
          <div className="demo-submit-bar">
    <SubmitBar
      price={mysum * 100}
      buttonText="提交订单"
      tip={
        <>
          你的收货地址不支持同城送,
          <span style={{ color: '#1989fa' }}>修改地址</span>
        </>
      }
    >
      <Checkbox checked={store.flagall} onChange={changeAll}>全选</Checkbox>
    </SubmitBar>
    </div>
    </div>
  )
}

export default Shopcar
// import React from 'react'

// function Shopcar() {
//   return (
//     <div>Shopcar</div>
//   )
// }

// export default Shopcar